import React from "react";
// 导入轮播图组件
import { Flex } from "antd-mobile";

import {withRouter} from 'react-router-dom'

// 导入props校验
import PropTypes from 'prop-types'
// 导入样式
import "./index.css"
function SearchHeader({cityName,history,className}) {

  return (
    <Flex className={['search_box', className || ''].join(' ')} >
      {" "}
      {/* 左侧内容 */}{" "}
      <Flex className="search">
        {" "}
        {/* 位置 */}{" "}
        <div
          className="location"
          onClick={() => history.push("/CityList")}
        >
          <span className="name"> {cityName} </span>{" "}
          <i className="iconfont icon-arrow"> </i>{" "}
        </div>{" "}
        {/* 搜索框 */}{" "}
        <div
          className="form"
          onClick={() => history.push("/search")}
        >
          <i className="iconfont icon-seach"> </i>{" "}
          <span className="text"> 请输入小区或地址 </span>{" "}
        </div>{" "}
      </Flex>{" "}
      {/* 右侧内容 */}{" "}
      <i
        className="iconfont icon-map"
        onClick={() => history.push("/map")}
      ></i>{" "}
    </Flex>
  );
}
// 添加属性校验
SearchHeader.propTypes = {
  cityName: PropTypes.string.isRequired,
  className: PropTypes.string
}
export default withRouter(SearchHeader)